<template>
    <!-- 用户物流信息展示组件 -->
    <el-card class="table-data-card">
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
        </Table>
    </el-card>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const tableData = ref({
    pageNo: 1,
    pageSize: 15,
})
const tableOptions = {}
const searchForm = ref({})

const loadDataList = async () => {
    let result = await proxy.Request({
        url: proxy.Api.queryMyLogistics,
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result)
    tableData.value.totalCount = result.data.length
}

const columns = [
    {
        label: '订单id',
        prop: 'orderId',
        width: 180
    },
    {
        label: '物流单号',
        prop: 'logisticsNumber',
        width: 180
    },
    {
        label: '联系人',
        prop: 'contact',
    },
    {
        label: '联系电话',
        prop: 'mobile'
    },
    {
        label: '省',
        prop: 'province',
    },
    {
        label: '市',
        prop: 'city',
    },
    {
        label: '区/县',
        prop: 'town',
    },
    {
        label: '具体地址',
        prop: 'street',
    },
    {
        label: '创建时间',
        prop: 'createTime',
    },
    {
        label: '更新时间',
        prop: 'updateTime',
    },
]

</script>

<style lang="scss" scoped>
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
